<template>
  <div id="zhishi-index">
    <div class="one-btns">
      <div
        v-if="roles === 'teacher' || 'internet_admin'"
        class="all-btn"
        @click="addZhinengti()"
      >
        <el-icon>
          <CirclePlus />
        </el-icon>
        添加智能体
      </div>
    </div>
    <Banjiao
      :tabCategory="tabCategory"
      @changeTab="changeTab"
      :xuebanList="xuebanList"
      :banjiaoList="banjiaoList"
      @editZhinengti="editZhinengti"
      @deleteZhinengti="deleteZhinengti"
    />

    <!-- 添加智能体弹窗 -->
    <el-dialog
      v-model="showAddZhinengti"
      width="30%"
      class="addZhinengtiDialog"
      :close-on-click-modal="false"
    >
      <el-form :model="form" label-width="120px" :rules="rules" ref="form">
        <el-form-item label="智能体名称：" prop="name">
          <el-input
            v-model="form.name"
            maxlength="20"
            show-word-limit
            style="width: 60%"
          />
        </el-form-item>
        <el-form-item label="URL：" prop="url">
          <el-input v-model="form.url" style="width: 60%" />
        </el-form-item>
        <el-form-item label="智能体介绍：" prop="introduction">
          <el-input
            v-model="form.introduction"
            type="textarea"
            maxlength="100"
            show-word-limit
            resize="none"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" color="#155eef" @click="saveAddZhinengti()"
          >保存</el-button
        >
        <el-button @click="showAddZhinengti = false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>
    
    <script>
import Banjiao from "@/components/Banjiao.vue";
export default {
  components: {
    Banjiao,
  },
  data() {
    return {
      roles: "",
      isEdit: false,
      editId: "",
      tabCategory: [],
      categoryId: "",
      categoryName: "",
      xuebanList: [],
      banjiaoList: [],
      showAddZhinengti: false,
      form: {
        name: "",
        url: "",
        introduction: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入智能体名称", trigger: "blur" },
        ],
        url: [{ required: true, message: "请输入URL", trigger: "blur" }],
        introduction: [
          { required: true, message: "请输入智能体介绍", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.roles = JSON.parse(localStorage.getItem("userInfo")).roles[0];
    this.getTabCategory();
  },
  methods: {
    // 获取分类
    getTabCategory() {
      this.$axios
        .get(`/tes/unauthorized/config?keys=modelApplicationArea`)
        .then((res) => {
          this.tabCategory = res.data.modelApplicationArea;
          this.categoryId = res.data.modelApplicationArea[0].id;
          this.categoryName = res.data.modelApplicationArea[0].keyValue;
          this.getZhinengtiList();
        });
    },

    // 切换分类
    changeTab(id, keyValue) {
      this.categoryId = id;
      this.categoryName = keyValue;
      this.getZhinengtiList();
    },

    // 获取智能体列表
    getZhinengtiList() {
      this.$axios
        .get(`/tes/ai-model-application/list?typeId=${this.categoryId}`)
        .then((res) => {
          if (this.categoryName == "AI学伴") {
            this.xuebanList = res.data;
            this.banjiaoList = [];
          } else {
            this.banjiaoList = res.data;
            this.xuebanList = [];
          }
        });
    },
    // 添加智能体
    addZhinengti() {
      // this.$router.push("/zhinengti/zhilist");
      this.isEdit = false;
      this.showAddZhinengti = true;
      this.form = {
        name: "",
        url: "",
        introduction: "",
      };
    },

    // 修改智能体
    editZhinengti(item) {
      this.isEdit = true;
      this.editId = item.id;
      this.showAddZhinengti = true;
      this.form = {
        name: item.name,
        url: item.url,
        introduction: item.introduction,
      };
    },

    // 删除智能体
    deleteZhinengti(item) {
      const delId = [item.id];
      this.$confirm("确定删除该智能体吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$axios
          .post("/tes/ai-model-application/delete", delId)
          .then((res) => {
            this.$message.success("删除成功");
            this.getZhinengtiList();
          });
      });
    },

    // 保存添加智能体
    saveAddZhinengti() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let queryObj = {};

          if (!this.isEdit) {
            queryObj = {
              ...this.form,
              areaType: this.categoryId,
            };
          } else {
            queryObj = {
              ...this.form,
              id: this.editId,
              areaType: this.categoryId,
            };
          }
          this.$axios
            .post("/tes/ai-model-application/save", queryObj)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success("添加成功");
                this.showAddZhinengti = false;
                this.getZhinengtiList();
              }
            });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
#zhishi-index {
  position: relative;
  margin-bottom: 20px;
  .all-box {
    padding: 20px;
    box-sizing: border-box;
  }
  .one-btns {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
  }
}
</style>

<style lang="scss">
.addZhinengtiDialog {
  .el-dialog__header {
    padding: 10px 20px;
  }
  .el-dialog__body {
    padding: 20px;
  }
  .el-textarea__inner {
    height: 132px;
  }
}
</style>